<template>
	<view class="order_box box mb_33">
		<view class="all_box bc_fff br_4 mt_12">
			<view class="order_header box height_40">
				<view class="header_left">
					<image src="../../../../static/images/order_icon.png" class="width_20 height_20" mode=""></image>
					<view class="ml_7 fz_16 fb">
						全部订单
					</view>
				</view>
				<view class="header_right fz_16 fb">
					264
					<u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="list_box box">
				<view class="single_list box width_104 height_59 br_4 mb_8 ml_8">
					<view class="single_header">
						待确认
						<u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
					</view>
					<view class="fz_16 fb mt_4">
						22
					</view>
				</view>
				<view class="single_list box width_104 height_59 br_4 mb_8 ml_8">
					<view class="single_header">
						待确认
						<u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
					</view>
					<view class="fz_16 fb mt_4">
						22
					</view>
				</view>
				<view class="single_list box width_104 height_59 br_4 mb_8 ml_8">
					<view class="single_header">
						待确认
						<u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
					</view>
					<view class="fz_16 fb mt_4">
						22
					</view>
				</view>
				<view class="single_list box width_104 height_59 br_4 mb_8 ml_8">
					<view class="single_header">
						待确认
						<u-icon class="ml_8" name="arrow-right" color="#999999"></u-icon>
					</view>
					<view class="fz_16 fb mt_4">
						22
					</view>
				</view>
			</view>
		</view>
		<view class="time_box height_44 bc_fff br_8 mt_12">
			<view class="fz_16 fb fc_333">
				今日
			</view>
			<u-icon name="arrow-right" color="#666666"></u-icon>
		</view>
		<view class="data_box box br_8 mt_12">
			<view class="data_header w100 height_40 back1">
				<view class="fz_16 fb fc_333 ml_4">
					订单金额统计（元）
				</view>
			</view>
			<view class="data_content bc_fff">
				<view class="data_inner w100 height_60">
					<view class="single_data">
						<view class="fz_12 fc_999">
							已收金额
						</view>
						<view class="fz_20 fc_333 fb mt_6">
							25562
							<text class="fc_999 fz_12">(300定金)</text>
						</view>
					</view>
					<view class="single_data center_box">
						<view class="fz_12 fc_999">
							已收金额
						</view>
						<view class="fz_20 fc_333 fb mt_6">
							25562
						</view>
					</view>
					<view class="single_data">
						<view class="fz_12 fc_999">
							已收金额
						</view>
						<view class="fz_20 fc_333 fb mt_6">
							25562
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="data_box box br_8 mt_12">
			<view class="data_header w100 height_40 back1">
				<view class="fz_16 fb fc_333 ml_4">
					订单量统计（单）
				</view>
			</view>
			<view class="data_content bc_fff">
				<view class="data_inner w100 height_60">
					<view class="single_data">
						<view class="fz_12 fc_999">
							已收金额
						</view>
						<view class="fz_20 fc_333 fb mt_6">
							25562
						</view>
					</view>
					<view class="single_data center_box">
						<view class="fz_12 fc_999">
							已收金额
						</view>
						<view class="fz_20 fc_333 fb mt_6">
							25562
						</view>
					</view>
					<view class="single_data">
						<view class="fz_12 fc_999">
							已收金额
						</view>
						<view class="fz_20 fc_333 fb mt_6">
							25562
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="data_box box br_8 mt_12">
			<view class="data_header w100 height_40 back1">
				<view class="fz_16 fb fc_333 ml_4">
					业绩统计（元）
				</view>
			</view>
			<view class="data_content bc_fff">
				<view class="data_inner w100 height_60">
					<view class="single_data">
						<view class="fz_12 fc_999">
							已收金额
						</view>
						<view class="fz_20 fc_333 fb mt_6">
							25562
						</view>
					</view>
					<view class="single_data center_box">
						<view class="fz_12 fc_999">
							已收金额
						</view>
						<view class="fz_20 fc_333 fb mt_6">
							25562
						</view>
					</view>
					<view class="single_data">
						<view class="fz_12 fc_999">
							已收金额
						</view>
						<view class="fz_20 fc_333 fb mt_6">
							25562
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userType: 2, // 1.导购员 2.店长 3.经销商 4.普通用户
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_box {
		background-color: #F6F6F6;
		@include set_padding(0rpx, 16rpx);

		.data_box {

			.data_header {
				@include flex_box(row, nowrap, flex-start, center);
			}

			.back1 {
				background: linear-gradient(93deg, #E5F0FF 0%, rgba(199, 221, 255, 0) 100%);
			}

			.data_content {
				@include set_padding(12rpx, 0rpx);

				.data_inner {
					@include flex_box(row, nowrap, flex-start, center);

					.single_data {
						flex: 1;
						@include flex_box(column, nowrap, center, center);
					}

					.center_box {
						border-left: 1rpx dashed #999999;
						border-right: 1rpx dashed #999999;
					}
				}
			}
		}

		.all_box {
		border: 1px solid red;
			.order_header {
				@include set_padding(0rpx, 12rpx);
				@include flex_box(row, nowrap, space-between, center);

				.header_left {
					color: #1D2129;
					@include flex_box(row, nowrap, flex-start, center);
				}

				.header_right {
					@include flex_box(row, nowrap, flex-end, center);
					color: #1D2129;
				}
			}

			.list_box {
				@include flex_box(row, wrap, flex-start, center);
				border: 1px solid green;
				.single_list {
					@include set_padding(8rpx, 8rpx);
					background-color: #F5F7FB;

					.single_header {
						@include flex_box(row, nowrap, flex-start, center);
					}
				}
			}
		}

		.time_box {
			@include set_padding(0rpx, 16rpx) @include flex_box(row, nowrap, space-between, center);
		}
	}
</style>